import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import UnoCSS from 'unocss/vite'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

import { viteMockServe } from 'vite-plugin-mock'

import vitePluginImp from 'vite-plugin-imp'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),

    UnoCSS(/*uno.config.ts*/),
    AutoImport({
      imports: ['vue'],
      resolvers: [ElementPlusResolver()],
      dts: 'src/types/declaration-files/auto-imports.d.ts'
    }),
    Components({
      // https://github.com/unplugin/unplugin-vue-components/issues/323
      // 使用TSX，浏览器未加载样式
      // include: [
      //   /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
      //   /\.vue$/,
      //   /\.vue\?vue/ // .vue
      // ],
      resolvers: [
        ElementPlusResolver({
          // importStyle: 'sass'
        })
      ],
      dts: 'src/types/declaration-files/components.d.ts'
    }),
    viteMockServe({
      mockPath: 'mock', // 当前mock目录
      enable: true // 开启mock功能
    }),
    vitePluginImp({
      libList: [
        {
          libName: '@formily/element-plus',
          libDirectory: 'esm',
          style(name) {
            return `@formily/element-plus/esm/${name}/style.js`
          }
        },
        {
          libName: 'element-plus',
          libDirectory: 'es/components',
          nameFormatter: (name) => {
            return name.replace('el-', '')
          },
          style: (name) => {
            if (['el-config-provider', 'effect'].includes(name)) return false
            return `element-plus/es/components/${name.replace('el-', '')}/style/css.mjs`
          }
        }
      ]
    })
  ],
  css: {
    preprocessorOptions: {
      scss: {
        // additionalData: `@use "@/assets/scss/element/index.scss" as *;@use "@/assets/scss/var.scss" as *;@use "@/assets/scss/mixin.scss" as *;`
        additionalData: `@use "@/assets/scss/var.scss" as *;@use "@/assets/scss/mixin.scss" as *;`
      }
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
